<template>
  <!-- 这里是状态栏 -->
  <view class="status_bar"> </view>

  <view class="home pageBg">
    <!-- 顶部 -->
    <AppBarVue>
      <template #title>
        <view class="h1-style">推荐</view>
      </template>
    </AppBarVue>

    <!-- banner轮播图 -->
    <view class="banner">
      <swiper
        indicator-dots
        indicator-color="gray"
        indicator-active-color="white"
        autoplay="true"
        interval="3000"
        circular="true"
      >
        <swiper-item v-for="item in bannerList" :key="item._id">
          <image model="scaleToFill" :src="item.picurl"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 公告 -->
    <view class="gonggao" @click="toGongGao">
      <!-- 左侧图标 -->
      <view class="left">
        <uni-icons type="sound-filled" size="30"></uni-icons>
        <text>公告</text>
      </view>

      <!-- 中间内容 -->
      <view class="center">
        <swiper vertical circular autoplay interval="3000">
          <swiper-item v-for="item in gongGaoList" :key="item.id">{{
            item.title
          }}</swiper-item>
        </swiper>
      </view>

      <!-- 右侧图标 -->
      <view class="right">
        <uni-icons type="forward" size="20" color="gray"></uni-icons>
      </view>
    </view>

    <!-- 每日推荐 -->
    <view class="day-by-day">
      <AppTitleVue>
        <template #title>
          <view class="h1-style">每日推荐</view>
        </template>

        <template #right>
          <uni-icons
            type="calendar-filled"
            size="20"
            color="$brand-theme-color"
          ></uni-icons>
          <uni-dateformat
            class="color"
            date="2020/10/20 20:20:20"
            format="dd"
          ></uni-dateformat>
        </template>
      </AppTitleVue>

      <!-- 滚动 -->
      <scroll-view scroll-x>
        <div
          class="scroll"
          v-for="item in dayList"
          :key="item._id"
          @click="toLook"
        >
          <image :src="item.smallPicurl"></image>
        </div>
      </scroll-view>
    </view>

    <!-- 专题 -->
    <view class="day-by-day">
      <AppTitleVue>
        <template #title>
          <view class="h1-style">专题精选</view>
        </template>

        <template #right>
          <text>More+</text>
        </template>
      </AppTitleVue>

      <!-- 图片 -->
      <view class="price">
        <TongYongBoxVue
          v-for="item in ZhuanTiList"
          :key="_id"
          :item_id="item._id"
          :item_name="item.name"
        >
          <template #pic>
            <image :src="item.picurl"></image>
          </template>
          <template #name> {{ item.name }} </template>
        </TongYongBoxVue>
        <MoreBoxVue></MoreBoxVue>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { getBannerAPI, getDayByDayAPI, getFenLeiAPI } from "../../api/apis";
import AppBarVue from "../components/AppBar.vue";
import AppTitleVue from "../components/AppTitle.vue";
import TongYongBoxVue from "../components/TongYongBox.vue";
import MoreBoxVue from "./componrnts/MoreBox.vue";
import { ref } from "vue";

// 首页轮播图数据
const bannerList = ref([]);
const banner = async () => {
  const res = await getBannerAPI();
  bannerList.value = res.data.data;
};

// 公告数据
const gongGaoList = ref([
  { id: 1, title: "白龙壁纸版权公告" },
  { id: 2, title: "欢迎来到白龙壁纸小程序" },
  { id: 3, title: "关注微信公众号“白龙壁纸”获取更多资源" },
]);

// 每日推荐数据
const dayList = ref([]);
const day = async () => {
  const res = await getDayByDayAPI();
  dayList.value = res.data.data;
};

// 专题精选数据（和分类页面数据共享）
const ZhuanTiList = ref([]);
const ZhuanTi = async () => {
  const res = await getFenLeiAPI({
    select: true,
  });
  ZhuanTiList.value = res.data.data;
};

banner();
day();
ZhuanTi();

// 跳转到图片详情页
const toLook = () => {
  uni.navigateTo({
    url: "/pages/Look/index",
  });
};
// 跳转到公告页
const toGongGao = () => {
  uni.navigateTo({
    url: "/pages/GongGao/index",
  });
};

// 分享给好友
onShareAppMessage((e) => {
  return {
    title: "白龙壁纸",
    path: "/pages/index/index",
  };
});
// 分享到朋友圈
onShareTimeline(() => {
  return {
    title: "白龙壁纸",
    imgUrl: "https://www.qingian8.com/images/hot1.jpg",
  };
});
</script>

<style lang="scss" scoped>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.home {
  padding: 30rpx;
  padding-bottom: 100rpx;

  .h1-style {
    font-size: 45rpx;
    font-family: 黑体;
  }

  .banner {
    width: 700rpx;
    height: 340rpx;
    margin: 50rpx auto;
    border-radius: 10rpx;
    overflow: hidden;
    // border: 1px solid red;

    swiper {
      width: 100%;
      height: 100%;

      swiper-item {
        width: 100%;
        height: 100%;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .gonggao {
    display: flex;
    justify-content: space-between;
    line-height: 75rpx;
    width: 700rpx;
    height: 75rpx;
    margin: 0 auto;
    border-radius: 50rpx;
    // border: 1px solid red;
    background-color: #c390b81f;

    .left {
      display: flex;
      // align-items: center;
      margin-left: 20rpx;

      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }

      text {
        color: $brand-theme-color;
        font-weight: 600;
      }
    }

    .center {
      flex: 1;
      height: 75rpx;
      margin-left: 15rpx;

      swiper {
        height: 100%;
      }

      text {
        color: gray;
      }
    }
  }

  .day-by-day {
    width: 100%;
    margin-top: 50rpx;

    scroll-view {
      white-space: nowrap;
      width: 100%;
      height: 450rpx;

      .scroll {
        display: inline-block;
        width: 200rpx;
        height: 450rpx;
        margin-right: 10rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
    }

    .price {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    :deep() {
      .uni-icons {
        color: $brand-theme-color;
      }
    }

    text {
      color: $brand-theme-color;
    }
  }
}
</style>
